<template>
    <a-card :bordered="false">
        <div>
            <a-form @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="12" :sm="12">
                        <a-form-item label="手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input v-model="queryParam.mobile" placeholder="请输入手机号"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="8">
                        <a-form-item>
                            <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
                            <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">
                                重置
                            </a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-row>
            <a-col :span="22">
            </a-col>
            <a-col :span="2">
                <a href="/static/短信发送内容.xlsx">下载模板</a>
            </a-col>
        </a-row>
        <vxe-grid
                id="SmsSendContentList"
                ref="vxeTable"
                :row-config="{keyField:'id'}"
                v-bind="options"
                v-on="listeners"
        >
            <template #action="{ row }">
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                    <a>删除</a>
                </a-popconfirm>
            </template>
        </vxe-grid>
    </a-card>
</template>

<script>
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { postAction } from '@/services/manage'
export default {
  name: 'SmsSendContentList',
  mixins: [VxeTableMixin],
  components: {},
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { type: 'seq', width: 40, fixed: 'left' },
        { title: '发送人', field: 'createBy', width: 100, formatter: 'dictText' },
        { title: '导入时间', field: 'createTime', width: 150 },
        { title: '手机号', field: 'mobile', width: 120 },
        { title: '短信内容', field: 'content', width: 700 },
        { title: '签名', field: 'title', width: 100, formatter: 'dictText' },
        { title: '发送状态', field: 'status', width: 100, formatter: 'dictText' },
        { title: '发送时间', field: 'sendTime', width: 150 },
        { title: '操作', field: 'operation', width: 60, fixed: 'right', slots: { default: 'action' }}
      ],
      url: {
        list: '/sms/send/content/v1/page',
        delete: '/sms/send/content/v1/remove/',
        deleteBatch: '/sms/send/content/v1/remove/',
        send: '/ping/sms/v1/sendImport'
      },
      importTemplateCode: 'SmsSendContentImport',
      customTableToolbar: {
        buttons: [
          { buttonRender: { name: 'VxeToolbarBatchDel', events: { click: this.batchDel }}},
          { buttonRender: {
            name: 'VxeToolbarAdd',
            events: { click: this.handleSmsSend },
            toolbarProps: {
              title: '发送',
              icon: 'check-circle'
            }
          }}
        ]
      }
    }
  },
  methods: {
    handleSmsSend() {
      postAction(this.url.send).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
